<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>

<div class="container">

    <div class="alert alert-info">alert提示信息</div>
    <div class="alert alert-info">
        alert提示信息
        <button class="close" data-dismiss="alert">&times;</button>
    </div>

    <h4>声明式触发</h4>
    <div class="alert alert-info">

        <h3>前端学习</h3>

        <p>
            前端技术复杂多变，需要花心思去学习。
        </p>
        <a class="btn btn-primary" data-dismiss="alert">关闭</a>

    </div>
    <h3>外部关闭</h3>
    <div class="alert alert-info" id="myAlert1">
        <h3>前端学习</h3>
        <p>
            前端技术复杂多变，需要花心思去学习。
        </p>
    </div>
    <button class="btn btn-primary" data-dismiss="alert" data-target="#myAlert1">关闭</button>
    
    <h4>javaScript触发</h4>
    <pre>
        <h3>
            $().alert():让警告框监听具有data-dismiss="alert"属性的后裔元素的单击事件
            $().alert("close"):关闭警告框并从DOM中将其删除。
            $(document).off('.alert.data-api'):关闭声明式功能
        </h3>
    </pre>
    <div class="alert alert-info in fade" id="myAlert2">
        <button id="btn_close" class="close">&times;</button>
        alert提示信息
    </div>
    
</div>
</body>
<script>
    $(function () {

        $("#btn_close").click(function () {
            $("#myAlert2").alert("close");
        });
    })
</script>
</html>